<template>
	<view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption" 
		 @up="upCallback"> 
			<view v-if="advList.length  > 0" class="swiper-adv bz p-2 b-radius2 bg-white">
				<swiper style="min-height: 300rpx" interval="3000" duration="300" :indicator-dots="advList.length > 1?true:false"  circular="true"
					indicator-color="#C6D7DC" indicator-active-color="#26C390" autoplay="true">
					<swiper-item class="b-radius2" v-for="(item,index) in advList" :key="index">
						<image style="width: 100%;height: auto;" class="banner" :src="item.image" 
						:data-url="item.url" :data-url_type="item.url_type" @tap="openurl" mode="widthFix"/>
						<text class="adv-title">{{item.title}}</text>
					</swiper-item>
					
				</swiper>
			</view>
			
			<view class="swiper-nav bz  bg-white b-radius2" v-if="navList.length > 0 && showStyle == 1" >
				
				<swiper :style="{'height':swiperHeight}"  :indicator-dots="navList.length > 1?true:false"  circular="true" 
					indicator-color="#C6D7DC" indicator-active-color="#26C390"> 
					<swiper-item class="b-radius2" v-for="(item,index) in navList "  :key="index" >
						<view class="d-flex flex-wrap j-start">
							<view class="navList" v-for="(c_item,c_index) in item" :key="c_index" 
							:data-url="c_item.url" :data-url_type="c_item.url_type" @tap="openurl">
								<image :src="c_item.image" class="navImg" mode="aspectFill"></image>
								<view class="navName">{{c_item.title}}</view>
							</view>
						</view> 
					</swiper-item>
				</swiper>
			</view>
			<view class="nav-2" v-if="navList.length > 0 && showStyle == 2">
				<view class="flex align-center nav2-body">
					<view class="nav-bg-body flex align-center justify-center" v-for="(item,index) in navList[0]" :key="index"
					:data-url="item.url" :data-url_type="item.url_type" @tap="openurl"
					>
						<view class="nav-bg">
							<view class="line1 flex align-center">
								<image :src="item.image" class="navImg" mode="aspectFill"></image>
								<view class="title">{{item.title}}</view>
							</view>
							<view class="line2">
								{{item.desc?item.desc:item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="newsTabs.length  > 0"><!-- 因为此处会返回全部，所以需要大于1 -->
				<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
				<view class="sticky-tabs">
					<me-tabs v-model="tabIndex" :tabs="newsTabs" :tabWidth="150" :height="80" @change="tabChange"></me-tabs>
					<!-- <view class="moreWrap" data-url="/pages/public/news/news-label" @tap="openurl">
						<image src="/static/images/index-news-tab-more.png" class="more" mode=""></image>
					</view> -->
				</view>
				<!-- 数据列表 -->  
				<view class="wrap">     
					<block>
						<view class="statistics-list" @tap.stop="openInfo(index)" v-if="newsList.length > 0" v-for="(item,index) in newsList" :key="index" >
							<view class="userInfo flex align-center">
								<view class="zhiding">
									<text @tap.stop="setTop(index)" v-if="item.a_is_top == 1" class="iconfont icon-zhiding"></text>
									<text @tap.stop="setTop(index)" v-else class="iconfont icon-zhiding-1"></text>
								</view>
								<view class="headimg flex align-center">
									<image :src="item.c_avatar" class="head-img"></image>
								</view>
								<view class="right">
									<view class="username">
										<text class="user-name fl">{{item.c_nickname}}</text>
										<text class="time-text fl" :class="'time-text'+item.time_status">{{item.time_text}}</text>
									</view>
									<view class="desc">
										<text>{{item.b_type_text}}<text class="zhanwei-text"></text></text>
										
										<text>{{item.b_createtime}}<text class="zhanwei-text"></text></text>
										
										<text>{{item.b_look_sum}}人看过</text>
									</view>
								</view>
							</view>
							<view class="s-title">
								{{item.b_title}}
							</view>
							<view class="list-botton">
								<text class="iconfont icon-fenxiang" @tap.stop="shareFunc(index)"></text>
								<text class="iconfont icon-guanli" @tap.stop="showOpe(index)"></text>
							</view>
						</view>	
							
						
						<!-- 视频 -->
						
					</block>
				</view>
			</view>
			
		</mescroll-uni>
		<!-- #ifdef MP-WEIXIN -->
		<force-login @loginSuccess="loginCallback"></force-login>  
		<!-- #endif -->
		<share-wechat ref="share_wechat" @close="shareClose"></share-wechat>
		<detail-opelist ref="detail_opelist" :showPageIndex="false" ></detail-opelist> 
		
	</view>
	
</template>

<script src="./index.js"></script>

<style lang="scss">
	page{
		height: 100%;
		background: #F1F1F1;
	}
	.nav-2{
		background: #ffffff;
		padding: 10rpx;
		.nav2-body{
			flex-wrap: wrap;
			.nav-bg-body{
				width: 50%;
				margin: 10rpx 0;
				.nav-bg{
					background:#FBF6FD ;
					width: 94%;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					.line1{
						height: 110rpx;
						.navImg{
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
						}
						.title{
							font-size: 32rpx;
							font-weight: bold;
							margin-left: 20rpx;
							width: 200rpx;
							max-height: 100%;
							overflow: hidden;
							
						}
					}
					.line2{
						color: #9FA2AB;
						font-size: 24rpx;
						height: 40rpx;
						overflow: hidden;
						line-height: 40rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
		
	}
	.swiper-adv{
		background: #F1F1F1 !important;
		padding-bottom: 0rpx;
		.adv-title{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			color: #fff;
			padding: 10rpx;
			font-size: 28rpx;
		}
	}
	.swiper-nav{
		width: 94%;
		margin: 20rpx 3% 20rpx 3%;
	}
	.banner{
		border-radius: 20rpx;
	}
	.statistics-list{
		background: #FFFFFF;
		width: 100%;
		margin: 0rpx 0% 20rpx 0;
		padding: 10rpx 3%;
		position: relative;
		.zhiding{
			position: absolute;
			right: 28rpx;
			top: 16rpx;
			color: #26C390;
			width: 50rpx;
			text-align: center;
			height: 50rpx;
			.iconfont{
				font-size: 34rpx;
			}
		}
		.list-botton{
			height: 60rpx;
			line-height: 60rpx;
			width: 100%;
			font-size: 26rpx;
			position: relative;
			
			.iconfont{
				position: absolute;
				right: 8px;
				top: 0;
				font-size: 50rpx;
				color: #26C390;
			}
			.icon-fenxiang{
				right: 80rpx;
			}
			.icon-guanli{
				font-size: 36rpx;
				top: -2rpx;
			}
		}
		.s-title{
			padding: 10rpx 0;
			font-size: 28rpx;
		}
		.userInfo{
			height: 100rpx;
			.headimg{
				.head-img{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}
			.right{
				.username{
					height: 50rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					font-weight: 600;
					.user-name{
						display: inline-block;
						max-width: 450rpx;
						height: 100%;
						overflow: hidden;
					}
					.time-text{
						display: inline-block;
						padding: 0 16rpx;
						height: 30rpx;
						line-height: 30rpx;
						border-radius: 24rpx;
						margin-left: 11rpx;
						font-size: 22rpx;
						font-weight: normal;
						margin-top: 12rpx;
						border: 2rpx solid #EDEDED;
					}
					.time-text-1{
						background: #EDEDED;
						color: #999999;
					}
					.time-text-2{
						background: #EDEDED;
						color: #999999;
						
					}
					.time-text1{
						color: #3B935E;
						border: 2rpx solid #3B935E;
					}
				}
				
				.desc{
					height: 50rpx;
					line-height: 50rpx;
					text{
						display: inline-block;
						font-size: 24rpx;
						color: #999999;
						padding-right: 20rpx;
						position: relative;
					}
					.zhanwei-text{
						width: 2rpx;
						height: 24rpx;
						background-color: #999999;
						padding: 0;
						position: absolute;
						top: 14rpx;
						right: 10rpx;
					}
				}
				
			}
		}
	}
	
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs{
		z-index: 990;
		position: sticky;
		top: 0;
		background-color: #fff;
		.moreWrap{
			height: 80rpx;
			width: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: absolute;
			right: 0;
			top: 0;
			background: #fff;
			.more{
				width: 30rpx;
				height: 30rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}
	
	.navList{
		width: 25%;
		margin: 20rpx 0;
		.navImg{
			width: 100rpx;
			height: 100rpx;
			display: block;
			margin: 0 auto;
			border-radius:50%;
		}
		.navName{
			height: 50rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #141414;
			line-height: 50rpx;
			text-align: center;
		}
	}
</style>
